cascading style sheets reference
תכונות | סגנון טקסט | מערך טקסט | רקע | גבול | שוליים | ריפוד | מערך עמוד | סוג אלמנט | ממשק משתמש
גבול (border)
בעזרת דפי סגנון גולשים (cascade) כל אלמנט יכול לקבל גבול, בעל רוחבים, צבעים וסגנונות מגוונים. אלמנטים יכולים גם לקבל כל גבול (עליון, שמאלי, תחתון, ימני) בסגנון, רוחב וצבע אחר.
תכונות הגבול הן:
יותר מכל קבוצת תכונות אחרת, לתכונות הגבול יש דרכיי קיצור רבות לקביעת ערכים. שימו לב לתיאורים הבאים כדי לקבוע כיצד, לדוגמא, לקבוע ערכים שונים עבור הצבע של כל קצה, או עבור הסגנון של כל קצה:
border-top-width, border-left-width, border-bottom-width, border-right-width, border-width
מה זה עושה?
תכונות אלה מאפשרות לכם לקבוע את הרוחב של כל אחד מן הקצוות בנפרד או של כולם יחד.
ערכים אפשריים
רוחב גבול יכול לקבל ערכים של מילות מפתח או ערכיי אורך.
ערכיי מילות המפתח שבהם ניתן להשתמש הם:
- דק (thin)
- בינוני (medium)
- עבה (thick)
אין פירוט לגבי משמעות מילות המפתח הללו, לכן דפדפנים שונים, ככל הנראה (ובאשר לכתיבה, אכן עושים זאת) מתארים אותם כעוביים שונים. הערובה היחידה היא כי דק (thin) אינו עבה יותר ממדיום (medium) , שאינו עבה יותר מאשר עבה (thick).
אנו דנים בערכיי אורך (Length) בפירוט בחלק שלנו לגבי ערכים. בשימוש בערכיי אורך יחסיים אתם יכולים ליצור גבולות שהם פרופורציונליים לגודל האלמנט, או לתכנים שלו.
ערכים של ברירת מחדל
אם לא נקבע רוחב כלשהו, עובי הגבול נקבע למדיום.
האם זה עובר בירושה?
האלמנט אינו יורש את העובי של גבול האלמנט ההורה שלו.
רמזים והצעות
באשר לכתיבה, ערכיי גבול נפרדים נתמכים בצורה חלקית בלבד ע"י הדפדפנים העיקריים. יש להעדיף את תכונת רוחב-הגבול שנהגה לקבוע את הרוחב של כל ארבעת הקצוות בבת אחת. ניתן להשתמש בתכונת רוחב-הגבול כדי לקבוע את הערך של כל קצה בנפרד. כדי לעשות זאת, השתמשו ביותר מערך אחד עבור התכונה. אתם יכולים להשתמש בערך אחד עד ארבעה ערכים עבור תכונת רוחב-הגבול. ערך אחד קובע את כל הגבולות לאותו הרוחב.
שני ערכים קובעים את הקצוות העליון והתחתון לערך הראשון ואת הקצוות השמאלי והימני לערך השני.
שלושה ערכים קובעים את רוחב הקצה העליון לערך הראשון, את הרוחב של הקצוות השמאלי והימני לערך השני ורוחב הקצה התחתון נקבע לערך השלישי.
ארבעה ערכים קובעים את רוחב הקצה העליון לערך הראשון, את רוחב הקצה השמאלי לערך השני, את רוחב הקצה התחתון לערך השלישי ואת רוחב הקצה הימני לערך הרביעי.
שמחים ששאלתם?
צבע-גבול (border-color)
מה זה עושה?
שלא כמו רוחב-גבול, שזה עתה ראינו, צבע-גבול נקבע בעזרת תכונה בודדת. ואולם, אין זה אומר שאינכם יכולים לקבוע לכל קצה צבע שונה. כמו עם תכונת הקיצור רוחב-גבול, שראינו זה עתה, צבע-גבול מגדיר צבעי קצוות שונים בעזרת שימוש ביותר מערך אחד.
ערכים אפשריים
צבע-גבול מוגדר בעזרת ערך צבע אחד עד ארבעה. אנו דנים בערכיי צבע (color values) בפירוט בחלק הערכים שלנו.
ערך צבע אחד מגדיר את אותו הצבע לכל קצה.
בעזרת שני ערכיי צבע, הערך הראשון מגדיר את הצבע של הקצה העליון והתחתון, והערך השני מגדיר את הצבע של הקצוות השמאלי והימני.
בעזרת שלושה ערכיי צבע, הערך הראשון מגדיר את הצבע של הקצה העליון, הערך השני מגדיר את הצבע של הקצוות השמאלי והימני והערך השלישי מגדיר את צבעו של הקצה התחתון.
בעזרת ארבעה ערכיי צבע, ארבעת ערכיי הצבע מגדירים בהתאמה את הצבע של הקצוות העליון, השמאלי, התחתון והימני.
ערכים של ברירת מחדל
אם לא הוגדר אף צבע עבור הגבול, הגבול מקבל את אותו הערך כמו האלמנט עצמו.
האם זה עובר בירושה?
צבע-הגבול של האלמנט אינו עובר בירושה מאלמנט ההורה שלו.
רמזים והצעות
כמו עם רוחב-גבול (ולא תכונות הגבול), התמיכה בקצוות שונים היא רחוקה מלהיות מושלמת בדפדפנים העיקריים.
סגנון-גבול (border-style)
מה זה עושה?
בנוסף לרוחב ולצבע, לגבול של אלמנט כלשהו, או לקצוות הפרטיים שלו יש סגנון מסוים. קיימים מספר סגנונות אפשריים, למרות שלא כולם נתמכים כרגע ע"י הדפדפנים העיקריים.
ערכים אפשריים
כמו עם צבע-גבול, ניתן לקבוע סגנונות-גבול שונים לקצוות שונים של גבול, בעזרת אותו תחביר שראינו עבור הצבעים.
ערך סגנון-גבול אחד מגדיר את אותו סגנון-גבול עבור כל קצה.
בעזרת שני ערכים של סגנון-גבול, הערך הראשון מגדיר את סגנון-הגבול של הקצה העליון והתחתון, והערך השני מגדיר את סגנון הגבול של הקצוות השמאלי והימני.
בעזרת שלושה ערכים של סגנון-גבול, הערך הראשון מגדיר את סגנון-הגבול של הקצה העליון, הערך השני מגדיר את סגנון הגבול של הקצוות השמאלי והימני והערך השלישי מגדיר את סגנון הגבול עבור הקצה התחתון.
בעזרת ארבעה ערכים של סגנון-גבול, ארבעת הערכים מגדירים בהתאמה את סגנון הגבול של הקצוות העליון, התחתון, השמאלי והימני.
מילות המפתח של סגנון-הגבול הן:
- none
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
במקום לתאר אותן, חקרו כל אחת מהן דרך דוגמא. אתם תיווכחו לגלות כי רבות מהן מופיעות בצורה זהה ברוב הדפדפנים, כיוון שהתמיכה בתכונה זו עדיין אינה 100%.
ערכים של ברירת מחדל
אם לא הוגדרה כל תכונה של סגנון-גבול, סגנון-הגבול יהיה none.
האם זה עובר בירושה?
אלמנטים אינם יורשים את סגנון-הגבול של האלמנטים ההורים שלהם.
רמזים והצעות
כמו עם תכונות גבול אחרות, התמיכה בהגדרת קצוות שונים של גבול היא רחוקה מלהיות מושלמת בדפדפנים העיקריים.
עליכם גם לזכור כי מספר דפדפנים אינם תומכים בכל סוג של סגנון. בדרך כלל, במקום שבו מילת מפתח של סגנון אינה נתמכת, הדפדפן קובע את הגבול ל- solid.
border-top, border-left, border-bottom, border-right, border
מה זה עושה?
כפי שהוזכר בתחילת חלק זה, קיימות דרכי קיצור שונות ורבות להגדרת ערכים של גבול. חמש התכונות הללו מאפשרות לכם להגדיר בעזרת תכונה אחת את אחד מתוך הבאים, או את כולם: ערכיי סגנון-גבול, רוחב-גבול וצבע-גבול, עבור כל קצה בהתאמה, או עבור כל הגבול בשלמותו.
ערכים אפשריים
תכונות הקיצור פשוט מקבלות את הערכים האפשריים הזהים כמו אלה של התכונות השלמות. כדי להגדיר יותר מערך תכונה אחד בעזרת תכונה מקוצרת, פשוט הפרידו את הערכים ע"י מרווחים.
לדוגמא, כדי להגדיר צבע, רוחב וסגנון של בקצה העליון של גבול האלמנט, אתם יכולים להשתמש בתכונה הבודדת הבאה:
border-top: red thick ridge
ערכים של ברירת מחדל
אנו דנים בערכים של ברירת המחדל של כל סוג של תכונה בחלקים הרלוונטיים למעלה.
האם זה עובר בירושה?
אף אחד מערכיי הגבול של אלמנט ההורה אינו עובר בירושה אל אלמנטים הילדים שלהם.
רמזים והצעות
זכרו כי לא כל הסגנונות נתמכים ע"י כל דפדפן, ולא כל הדפדפנים תומכים בצורה מלאה בערכים השונים עבור הקצוות השונים של כל גבול.
תכונות | סגנון טקסט | מערך טקסט | רקע | גבול | שוליים | ריפוד | מערך עמוד | סוג אלמנט | ממשק משתמש
|
